<template>
  <div>
    <div class="barticle1">
      <div class="barticle1_1" @click="click()"><i class="iconfont icon-icon"></i></div>
      <div class="barticle1_2">
        <i class="iconfont icon-fangdajing"></i>
        <input type="text" value="卫衣"/>
      </div>
    </div>
    <div class="barticle2">
      <a href="#" @click="send()" id="shangpin">商品</a>
      <a href="#" @click="get()" id="wenzhang">文章</a>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
      methods: {
        send() {
          this.$emit("shangpin");
          $("#shangpin").css({borderBottom:"2px solid #ed145b",color:"#ed145b"}).siblings().css({borderBottom:"none",color:"#666"})
        },
        get() {
          this.$emit("wenzhang");
          $("#wenzhang").css({borderBottom:"2px solid #ed145b",color:"#ed145b"}).siblings().css({borderBottom:"none",color:"#666"})
        },
        click:function () {
          window.history.back();
        }
      },

    }
</script>

<style scoped lang="scss">
  .barticle1{
    width:100%;
    height:0.6rem;
    border-bottom: 1px solid #d8d8d8;
  }
  .barticle1_1 i{
    float: left;
    font-size: 0.3rem;
    color: #333;
    margin-top: 0.17rem;
  }
  .barticle1_2{
    float: left;
    width: 85%;
    height: 0.4rem;
    background: #f3f3f3;
    margin-left: 2%;
    margin-top: 0.1rem;
    border-radius: 5px;
  }
  .barticle1_2 i{
    float: left;
    font-size: 0.2rem;
    padding-left: 0.1rem;
    padding-top: 0.1rem;
    color: #c8c8c9;
  }
  .barticle1_2 input{
    border: none;
    outline: none;
    float: left;
    width: 2.2rem;
    height: 0.2rem;
    margin-left: 0.1rem;
    margin-top: 0.1rem;
    background: #f3f3f3;
  }

  .barticle2{
    width:100%;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #f7f7f7;
  }
  .barticle2 a{
    display: block;
    width:50%;
    height:0.7rem;
    font-size: 0.18rem;
    text-align: center;
    line-height: 0.7rem;
    color:#666;
  }
  .barticle2 a:first-child{
    color:#ed145b;
    border-bottom: 2px solid #ed145b;
  }
</style>
